---
import { getEntry } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import styles from '@design-system/modules/GridHomepage.module.scss';
import { Quotes } from '@components/quotes/Quotes';
import { quotesData } from '@components/quotes/quotesData';
import FrameworkSelector from '@components/FrameworkSelector';
import ChartsLogo from '@images/inline-svgs/ag-charts-logo.svg?react';
import HeroGrid from '@components/hero-grid/HeroGrid.astro';
import { pathJoin } from '@utils/pathJoin';
import { FILES_BASE_PATH } from '@constants';
import { AutomatedExamples } from '@components/automated-examples/AutomatedExamples';

// TODO: Is this best place to get the current version from?
const { data: versions } = await getEntry('versions', 'ag-grid-versions');
const agGridVersion = versions[0].version;

const frameworksData = [
    {
        name: 'react',
        url: '/react-data-grid/',
    },
    {
        name: 'angular',
        url: '/angular-data-grid/',
    },
    {
        name: 'vue',
        url: '/vue-data-grid/',
    },
    {
        name: 'javascript',
        url: '/javascript-data-grid/',
    },
];

// TODO: Use `agGridEnterpriseVersion` from `@constants`;
const agGridEnterpriseVersion = '31.1.1';
const enterpriseGridUrl = `https://cdn.jsdelivr.net/npm/ag-grid-charts-enterprise@${agGridEnterpriseVersion}/dist/ag-grid-charts-enterprise.min.js`;
---

<!-- Dev files -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
<!-- TODO: Add for dev packages -->
<script src={enterpriseGridUrl}></script>

<Layout
    title="AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid"
    description={`AG Grid is a feature rich datagrid designed for the major JavaScript Frameworks. Version ${agGridVersion} is out now. Easily integrate into your application to deliver filtering, grouping, aggregation, pivoting and much more with the performance that your users expect. Our Community version is free and open source, or take a 2 month trial of AG Grid Enterprise.`}
    showSearchBar={false}
    showDocsNav={false}
>
    <div class={styles.homepageHero}>
        <section class:list={[styles.heroInner, 'layout-max-width-small']}>
            <section class={styles.heroHeadings}>
                <h1 class="text-xl">The&nbsp;Best&nbsp;JavaScript Grid&nbsp;in&nbsp;the&nbsp;World</h1>
                <h2 class="text-base normal-weight-text">
                    The professional choice for developers building enterprise&nbsp;applications
                </h2>
            </section>
            <section class={styles.heroGrid}>
                <HeroGrid />
            </section>
        </section>
    </div>

    <div class={styles.homepageFrameworks}>
        <div class:list={[styles.frameworksInner, 'layout-max-width-small']}>
            <span class:list={[styles.frameworksLabel, 'text-secondary']}>Get&nbsp;started</span>

            <FrameworkSelector client:load data={frameworksData} isFullWidth />
        </div>
    </div>

    <div class={styles.homepageCustomers}>
        <div class:list={[styles.customersInner, 'layout-max-width-small']}>
            <h2>Used by 90% of the Fortune 500</h2>
            <p class="text-tertiary">
                Trusted by the finest teams globally, an unmatched experience for developers and users alike.
            </p>
            <div class={styles.customerLogos}></div>
        </div>
    </div>

    <div class={styles.homepageQuotes}>
        <div class="layout-max-width-small">
            <Quotes client:load data={quotesData} />
        </div>
    </div>

    <div class={styles.homepageCharts}>
        <div class:list={[styles.chartsInner, 'layout-max-width-small']}>
            <div class={styles.chartsCopy}>
                <span class={styles.chartsLogo}>
                    <ChartsLogo />
                </span>

                <p class="text-lg">
                    Check out the all new{' '}
                    <a href="https://charts.ag-grid.com">
                        <b>AG Charts</b>
                    </a>
                    . Experience the power of <b>AG Grid</b>{' '}
                    <a href="/javascript-data-grid/integrated-charts/">Integrated Charts</a> in a standalone library.
                </p>
            </div>
            <div class={styles.chartsExample}>
                <img class={styles.chartsExampleLight} src="images/ag-charts-gallery-light.webp" alt="AG Charts" />
                <img class={styles.chartsExampleDark} src="images/ag-charts-gallery-dark.webp" alt="AG Charts" />
            </div>
        </div>
    </div>

    <AutomatedExamples client:only />

    <div class={styles.homepageSponsorship}>
        <section class:list={[styles.sponsorshipInner, 'layout-max-width-small']}>
            <div>
                <h2>Supporting Open&nbsp;Source</h2>
                <h3 class="thin-text">We are proud to sponsor the tools we use and love.</h3>
            </div>

            <ul class:list={[styles.projectsList, 'list-style-none']}>
                <li class={styles.project}>
                    <img src="images/webpack.svg" alt="Webpack" />

                    <h3>Webpack</h3>
                </li>

                <li class:list={[styles.project, styles.projectPlunker]}>
                    <img src="images/plunker.svg" alt="Plunker" />

                    <h3>Plunker</h3>
                </li>
            </ul>
        </section>
    </div>
</Layout>
